	<!-- Initialize EnlighterJS using the Helper Utility -->
	<script type="text/javascript">
		window.addEvent('domready', function(){
			// ==========================================================
			// EXAMPLE 1 - Different Inline+Block Config (default Language+Theme)
			// ==========================================================
			// initialize enlighterjs for block elements within container #example1
			EnlighterJS.Util.Helper(document.getElements('#example1 pre'), {
				// replace tabs with 2 spaces
				indent: 2,
				
				// default language: js
				language: 'javascript',
				
				// block element renderer
				renderer: 'Block',
				
				// no tab pane (also if data-enlighter-group attribute is provided!)
				grouping: false
			});
			
			// initialize enlighterjs for inline elements within container #example1
			EnlighterJS.Util.Helper(document.getElements('#example1 code.ih'), {
				// inline! element renderer (this is important for inline syntax highlighting - otherwise the code will be displayed as <ol> list like block elements!)
				renderer: 'Inline',
				
				// set default language to php
				language: 'php',
				
				// use the classic theme for inline code!
				theme: 'classic'
			});
			
			// ==========================================================
			// EXAMPLE 2 - Highlight a single pre element using the Native Element.enlight extension
			// ==========================================================
			// you can pass any EnlighterJS options as object or just true/false
			document.id('Example2_Codeblock').enlight({
				language: 'xml',
				theme: 'classic',
				indent: 3,
				infoButton: true,
				windowButton: true
			});
			
			// enable/disable highlighting using buttons
			document.getElement('#example2 .hiOn').addEvent('click', function(){
				document.id('Example2_Codeblock').enlight(true);
			});
			document.getElement('#example2 .hiOff').addEvent('click', function(){
				document.id('Example2_Codeblock').enlight(false);
			});
			
			// ==========================================================
			// EXAMPLE 3 - Highlight a single pre element using classic EnlighterJS Class context
			// ==========================================================
			// get element
			var example3_el = document.getElement('#example3 pre');
			
			// create config
			var options3 = {
					language: 'xml',
					theme: 'classic',
					indent: 2,
					infoButton: true,
					windowButton: true,
					rawButton: true
			};
			
			// create new instance
			var enlighter3 = new EnlighterJS(example3_el, options3);
			
			// start highligjting
			enlighter3.enlight(true);
			
			// enable/disable highlighting using buttons
			document.getElement('#example3 .hiOn').addEvent('click', function(){
				enlighter3.enlight(true);
			});
			document.getElement('#example3 .hiOff').addEvent('click', function(){
				enlighter3.enlight(false);
			});

			// ==========================================================
			// EXAMPLE 4 - Codegroups required EnlighterJS.Util.Helper !
			// ==========================================================
			// initialize enlighterjs for block elements within container #example4
			EnlighterJS.Util.Helper(document.getElements('#example4 pre'), {
				// replace tabs with 2 spaces
				indent: 2,
				
				// default language: js
				language: 'javascript',
				
				// block element renderer
				renderer: 'Block',
				
				// use Beyond as default theme
				theme: 'beyond',
				
				// no linennumbers
				showLinenumbers: false
			});
			
			// ==========================================================
			// EXAMPLE 5 - Using EnlighterJS with dynamical loaded content
			// ==========================================================
			// create new html request - use testcase data as source
			var htmlRequest5 = new Request.HTML({
				evalScripts: false,
				url: '../Resources/TestcaseData/c.html',
				
				onSuccess: function(responseTree, responseElements, responseHTML, responseJavaScript){
					// directly append the content into the inner example5 pane
					document.id('example5').set('html', responseHTML);
					
					// highlight all pre elements within the container!
					EnlighterJS.Util.Init('#example5 pre', '#example5 code', {
						// replace tabs with 2 spaces
						indent: 2,
						
						// use Beyond as default theme
						theme: 'classic',
						
						// no linennumbers
						showLinenumbers: false
					});
				}
			});
			
			// trigger request on click
			document.getElement('#example5 .loadContent').addEvent('click', function(){
				htmlRequest5.get();
			});
			
		});
	</script>

    <div class="alert alert-info" role="alert">Level: <strong>Intermediate/Advanced</strong></div>
<!-- EXAMPLE 1 ########################## -->			
<div class="panel panel-default">
	<div class="panel-heading">Example 1 - Different Inline+Block Config</div>
	<div class="panel-body" id="example1">
	<h4>Javascript Code - default language JS</h4>
<pre data-enlighter-highlight="5">
$('#loading-example-btn').click(function () {
	var btn = $(this)
	btn.button('loading')
	$.ajax(...).always(function () {
		btn.button('reset')
	});
});
</pre>

	<h4>Inline PHP Code - Using classic Theme and PHP as default language </h4>
	<p>EnlighterJS also supports <code class="ih" >$content = print_r(array(1,2,3), true);</code> (since version 2.0).<br />Not highlighted (selector not matching) <code>$content = print_r(array(1,2,3), true);</code></p>
</div></div>
<!-- // EXAMPLE 1 ########################## -->




<!-- EXAMPLE 2 ########################## -->			
<div class="panel panel-default">
	<div class="panel-heading">Example 2 - Using native Element.enlight() extension</div>
	<div class="panel-body" id="example2">
		<p>Just want to highlight single elements on your page, maybe loaded dynamically and not available on domready ?</p>
		<div class="btn-group">
			<button type="button" class="btn btn-default hiOn">Highlight</button>
			<button type="button" class="btn btn-default hiOff">Un-Highlight</button>
		</div>	
		<h4>XML Code</h4>
<pre id="Example2_Codeblock">
&lt;building name="GlobalDynamics Main Building" id="0xFA8A91C6617DFA1B"&gt;
	&lt;group level="2"&gt;
		&lt;room number="123"&gt;Conference Room A&lt;/room&gt;
		&lt;room number="124"&gt;Conference Room B&lt;/room&gt;
		&lt;room number="125"&gt;Conference Room C&lt;/room&gt;
		&lt;room number="126"&gt;Conference Room D&lt;/room&gt;
	&lt;/group&gt;
	&lt;group level="2"&gt;
		&lt;room number="17"&gt;John's Office&lt;/room&gt;
		&lt;room number="19"&gt;Eric's Office&lt;/room&gt;
	&lt;/group&gt;
</pre>
</div></div>
<!-- // EXAMPLE 2 ########################## -->




<!-- EXAMPLE 3 ########################## -->		
<div class="panel panel-default">
	<div class="panel-heading">Example 3 - Using EnlighterJS in OOP context</div>
 	<div class="panel-body" id="example3">
 		<p>This method is recommended if you want to do some advanced stuff</p>
		<div class="btn-group">
			<button type="button" class="btn btn-default hiOn">Highlight</button>
			<button type="button" class="btn btn-default hiOff">Un-Highlight</button>
		</div>

		<h4>XML Code</h4>
<pre>
&lt;building name="GlobalDynamics Main Building" id="0xFA8A91C6617DFA1B"&gt;
	&lt;group level="2"&gt;
		&lt;room number="123"&gt;Conference Room A&lt;/room&gt;
		&lt;room number="124"&gt;Conference Room B&lt;/room&gt;
		&lt;room number="125"&gt;Conference Room C&lt;/room&gt;
		&lt;room number="126"&gt;Conference Room D&lt;/room&gt;
	&lt;/group&gt;
	&lt;group level="2"&gt;
		&lt;room number="17"&gt;John's Office&lt;/room&gt;
		&lt;room number="19"&gt;Eric's Office&lt;/room&gt;
	&lt;/group&gt;
</pre>
</div></div>
<!-- // EXAMPLE 3 ########################## -->



<!-- EXAMPLE 4 ########################## -->		
<div class="panel panel-default">
	<div class="panel-heading">Example 4 - Using Codegroups</div>
 	<div class="panel-body" id="example4">
 		<p>If you need Codegroups, you have to use the <code>EnlighterJS.Util.Helper</code> utility function for initialiation which does the "magic" part for you! <br />
 		Note: <code>EnlighterJS.Util.Init</code> as well as <code>EnlighterJS.Util.Metainit</code> trigger this utility!</p>

		<h4>XML Code</h4>
<pre data-enlighter-group="EX4" data-enlighter-title="XML Document" data-enlighter-language="xml">
&lt;building name="GlobalDynamics Main Building" id="0xFA8A91C6617DFA1B"&gt;
	&lt;group level="2"&gt;
		&lt;room number="123"&gt;Conference Room A&lt;/room&gt;
		&lt;room number="124"&gt;Conference Room B&lt;/room&gt;
		&lt;room number="125"&gt;Conference Room C&lt;/room&gt;
		&lt;room number="126"&gt;Conference Room D&lt;/room&gt;
	&lt;/group&gt;
	&lt;group level="2"&gt;
		&lt;room number="17"&gt;John's Office&lt;/room&gt;
		&lt;room number="19"&gt;Eric's Office&lt;/room&gt;
	&lt;/group&gt;
</pre>
<pre data-enlighter-group="EX4" data-enlighter-title="jQuery Code" data-enlighter-language="javascript">
$('#loading-example-btn').click(function () {
	var btn = $(this)
	btn.button('loading')
	$.ajax(...).always(function () {
		btn.button('reset')
	});
});
</pre>
</div></div>
<!-- // EXAMPLE 4 ########################## -->








<!-- EXAMPLE 5 ########################## -->		
<div class="panel panel-default">
	<div class="panel-heading">Example 5 - Dynamical Content/AJAX</div>
 	<div class="panel-body" id="example5">
 		<p>You can also load dynamic content and highlight it! The most simple way is the use of <code>EnlighterJS.Util.Init</code> utility function!</p>
		<div class="btn-group">
			<button type="button" class="btn btn-default loadContent">Load Content & Highlight it</button>
		</div>
</div></div>
<!-- // EXAMPLE 5 ########################## -->

